<template>
  <div class="my-input">
    <slot></slot>
    <input
      type="text"
      :placeholder="placeholder"
      :value="value"
      @input="inpChange"
      @keydown.enter="inpAdd"
    />
  </div>
</template>

<script>
export default {
  props: {
    placeholder: String,
    value: String,
  },
  data() {
    return {};
  },
  methods: {
    inpChange(e) {
      this.$emit("input", e.target.value);
    },

    inpAdd() {
      this.$emit("add");
    },
    //按下回车的时候调用父组件的add方法在父组件中实现添加
  },
  created() {},
  mounted() {},
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.my-input {
  width: 100%;
  height: 50px;
  background: rgb(58, 50, 50);
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #fff;
  input {
    width: 50%;
    height: 30px;
  }
}
</style>
